<template>
  <div id="app">
    <h1 style="margin-left: 50px">审批</h1>
    <el-input style="width: 15%; margin-left: 100px;" v-model="input" placeholder="请输入内容"></el-input>
    <el-button style="margin-left: 20px;" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    <!-- 表单 -->
    <el-table
      :data="filteredTableData"
      style="width: 100%; margin-left: 50px;">
      <el-table-column
        prop="id"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="studentName"
        label="姓名"
        width="100">
      </el-table-column>

      <el-table-column
        prop="leaveName "
        label="请假类别"
        width="100">
      </el-table-column>
      <el-table-column
        prop="startTime"
        :formatter="formatDate"
        label="开始时间"
        width="100">
      </el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        :formatter="formatDate"
        width="100">
      </el-table-column>
      <el-table-column
        prop="leaveReason"
        label="原因"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="success" @click="handleApprove(scope.row)">同意</el-button>
          <el-button size="mini" type="danger" @click="handleReject(scope.row)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog
      title="个人信息"
      :visible.sync="detailDialogVisible"
      width="30%">
      <el-form :model="filteredTableData" label-width="80px">
        <el-form-item label="序号">
          <span>{{ filteredTableData.id }}</span>
        </el-form-item>
        <el-form-item label="姓名">
          <span>{{ filteredTableData.studentName}}</span>
        </el-form-item>
  
        <el-form-item label="请假类别">
          <span>{{ filteredTableData.leaveName }}</span>
        </el-form-item>
       
        <el-form-item label="原因">
          <span>{{ filteredTableData.leaveReason }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 驳回对话框 -->
    <el-dialog
      title="驳回"
      :visible.sync="rejectDialogVisible"
      width="30%">
      <el-form :model="rejectForm">
        <el-form-item label="原因" label-width="80px">
          <el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="textarea">
</el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmReject">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getApproval ,sendApproval} from '@/api/shenpi'
export default {
  data() {
    return {
      leaveStatus:1,
      leaveStatusOne:2,
      textarea: '',//驳回原因存放的变量
      input: '',
      filteredTableData: {
        leaveName:""
      },
      detailDialogVisible: false,
      
      rejectDialogVisible: false,
      rejectForm: {
        reason: ''
      },
      currentRowIndex: -1,
      currentRow: null,
      rules: {
        textarea: [
          { required: true, message: '请输入驳回理由', trigger: 'blur' }
        ]
      },
    }
  },
  created() {
    this.filteredTableData = this.tableData;
    this.getApproval()
  },
  methods: {
   
       formatDate(row, column, cellValue, index) {
      if (!cellValue) return "";
      const date = new Date(cellValue);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    handleDetail(index, row) {
      console.log('详情', index, row);
      this.detailForm = { ...row };
      this.detailDialogVisible = true;
    },
    confirmReject(){

    },
    //同意
    handleApprove(row) {
      this.$confirm('确定要提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sendApproval({ id: row.id, applicationStatus: this.leaveStatus }).then(() => {
          this.$message.success("提交成功");
          this.getApproval(); // 重新加载请假列表
        }).catch(err => {
          this.$message.error("提交失败");
        });
      }).catch(() => {
        this.$message.info("已取消提交");
      });
    },
    //驳回
    handleReject(row) {
          this.$prompt('请输入驳回理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消', 
      }).then(({value}) => {
        sendApproval({ id: row.id, applicationStatus: this.leaveStatusOne,turnDownReason:value }).then(() => {
          this.$message.success("提交成功");
          this.getApproval(); // 重新加载请假列表
        }).catch(err => {
          this.$message.error("提交失败");
        });
      }).catch(() => {
        this.$message.info("已取消提交");
      });
    },
    getApproval(){
      getApproval().then(response => {
        console.log(response);
        this.filteredTableData=response.data.map(item => ({
          ...item,
          leaveName: item.leaveType === 1 ? "事假" : item.leaveType === 2 ? "病假" : "公假",
        }));
      })
    },

    handleSearch() {
      const keyword = this.input.toLowerCase();
      this.filteredTableData = this.tableData.filter(item => 
        Object.values(item).some(value => 
          String(value).toLowerCase().includes(keyword)
        )
      );
    }
  }
}
</script>

<style>

/* 可以在这里添加样式 */
</style>